<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>裁判员详情</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <script type="text/javascript" src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <script src="../js/base.js"></script>
    <script src="../js/jquery.min.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .juese {
            text-align: center;
            width: 90%;
            border: 1px solid #ccc;
            margin: 20px auto;
        }

        .juese th {
            text-align: center;
            background: #fff;
        }

        .layui-row .juese .layui-table td,
        .layui-row .juese .layui-table th {
            font-size: 14px;
        }

        .layui-col-md4 label {
            width: 30%;
            padding: 9px 0;
            font-size: 14px;
            color: #999;
        }

        .layui-col-md4 div {
            line-height: 38px;
            width: 70%;
            text-align: left;
            font-size: 14px;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            padding-left: 10px;
        }

        .layui-col-md3 label {
            width: 30%;
            padding: 9px 0;
            font-size: 14px;
            color: #999;
        }

        .layui-col-md3 div {
            line-height: 38px;
            width: 70%;
            text-align: left;
            font-size: 14px;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            padding-left: 10px;
        }

        .layui-col-md5 label {
            width: 30%;
            padding: 9px 0;
            font-size: 14px;
            color: #999;
        }

        .layui-col-md5 div {
            line-height: 38px;
            width: 70%;
            text-align: left;
            font-size: 14px;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            padding-left: 10px;
        }

        .layui-col-md6 label {
            width: 30%;
            padding: 9px 0;
            font-size: 14px;
            color: #999;
        }

        .layui-col-md6 div {
            line-height: 38px;
            width: 70%;
            text-align: left;
            font-size: 14px;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            padding-left: 10px;
        }

        table {
            border-collapse: collapse;
            font-size: 14px;
            width: 100%;
        }

        td {
            border-bottom: #ccc 1px solid;
            padding: 10px 8px;
            text-align: center;
            color: #606266;
        }

        th {
            width: 120px;
            border-bottom: #ccc 1px solid;
            padding: 10px 8px;
            color: #909399;
        }

        table tr:last-child td {
            border-bottom: none;
        }

        .juese ul {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            padding: 20px;
        }

        .juese ul li {
            margin: 0 80px;
        }

        .juese ul li p {
            color: #333;
            line-height: 28px;
        }

        .juese ul li span {
            color: #999;
        }
    </style>
</head>

<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">
            <div style="text-align: center;font-size: 16px;">角色信息</div>
            <div class="juese">
                <ul>
                    <li>
                        <p>裁判员角色</p>
                        <span>男子组裁判</span>
                    </li>
                    <li>
                        <p>裁判等级</p>
                        <span>一级</span>
                    </li>
                    <li>
                        <p>裁判监督等级</p>
                        <span>三级</span>
                    </li>
                    <li>
                        <p>裁判讲师等级</p>
                        <span>三级</span>
                    </li>
                </ul>
            </div>
            <div style="text-align: center;font-size: 16px;">个人信息</div>
            <div class="juese layui-row">
                <div class="layui-col-md10">
                    <div style="padding:20px;overflow: hidden;">
                        <div class="layui-inline layui-col-md4">
                            <label class="layui-form-label">用户ID：</label>
                            <div class="layui-input-inline" id="id">
                            </div>
                        </div>
                        <div class="layui-inline layui-col-md4">
                            <label class="layui-form-label">姓名：</label>
                            <div class="layui-input-inline" id="name">
                            </div>
                        </div>
                        <div class="layui-inline layui-col-md4">
                            <label class="layui-form-label">性别：</label>
                            <div class="layui-input-inline" id="sex">
                            </div>
                        </div>
                        <div class="layui-inline layui-col-md4">
                            <label class="layui-form-label">证件类型：</label>
                            <div class="layui-input-inline" id="documentType">
                            </div>
                        </div>
                        <div class="layui-inline layui-col-md4">
                            <label class="layui-form-label">证件号码：</label>
                            <div class="layui-input-inline" id="documentNumber">
                            </div>
                        </div>
                        <div class="layui-inline layui-col-md4">
                            <label class="layui-form-label">身高：</label>
                            <div class="layui-input-inline" id="height">
                            </div>
                        </div>
                        <div class="layui-inline layui-col-md4">
                            <label class="layui-form-label">体重：</label>
                            <div class="layui-input-inline" id="weight">
                            </div>
                        </div>
                        <div class="layui-inline layui-col-md4">
                            <label class="layui-form-label">血型：</label>
                            <div class="layui-input-inline" id="bloodType">
                            </div>
                        </div>
                        <div class="layui-inline layui-col-md4">
                            <label class="layui-form-label">国籍：</label>
                            <div class="layui-input-inline" id="nationality">
                            </div>
                        </div>
                        <div class="layui-inline layui-col-md4">
                            <label class="layui-form-label">民族：</label>
                            <div class="layui-input-inline" id="nation">
                            </div>
                        </div>
                        <div class="layui-inline layui-col-md4">
                            <label class="layui-form-label">所属协会：</label>
                            <div class="layui-input-inline" id="associationName">
                            </div>
                        </div>
                        <div class="layui-inline layui-col-md4">
                            <label class="layui-form-label">市级：</label>
                            <div class="layui-input-inline" id="city">
                            </div>
                        </div>
                        <div class="layui-inline layui-col-md4">
                            <label class="layui-form-label">年份：</label>
                            <div class="layui-input-inline" id="year">
                            </div>
                        </div>
                        <div class="layui-inline layui-col-md4">
                            <label class="layui-form-label">出生地：</label>
                            <div class="layui-input-inline" id="birthAddress">
                            </div>
                        </div>
                        <div class="layui-inline layui-col-md4">
                            <label class="layui-form-label">出生日期：</label>
                            <div class="layui-input-inline" id="birthDay">
                            </div>
                        </div>
                        <div class="layui-inline layui-col-md4">
                            <label class="layui-form-label">政治面貌：</label>
                            <div class="layui-input-inline" id="politicCountenance">
                            </div>
                        </div>
                        <div class="layui-inline layui-col-md4">
                            <label class="layui-form-label">电子邮箱：</label>
                            <div class="layui-input-inline" id="email">
                            </div>
                        </div>
                        <div class="layui-inline layui-col-md4">
                            <label class="layui-form-label">手机号：</label>
                            <div class="layui-input-inline" id="tel">
                            </div>
                        </div>
                        <div class="layui-inline layui-col-md4">
                            <label class="layui-form-label">其他电话：</label>
                            <div class="layui-input-inline" id="otherTel">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md2">
                    <div style="width: 118px;height:138px;margin-top: 40px;">
                        <img id="headPhoto" style="width: 100%;height:100%;" src="" alt="">
                    </div>
                </div>
            </div>
            <div style="text-align: center;font-size: 16px;">审核流程</div>
            <div class="juese layui-row">
                <div class="layui-col-md12">
                    <div style="padding:20px;overflow: hidden;">
                        <table>
                            <tr>
                                <th style="width: 150px">操作名称</th>
                                <th style="width: 310px">操作人</th>
                                <th style="width: 310px">操作时间</th>
                                <th style="width: 320px">审核意见</th>
                            </tr>
                            <tr>
                                <td>填写表单</td>
                                <td>吴明峰</td>
                                <td>2019-02-12 20:10:00</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>会员协会审核</td>
                                <td>yaoqing</td>
                                <td>2019-02-13 22:10:00</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>中国足协审核</td>
                                <td>中国足协裁判管理部</td>
                                <td>2019-02-13 22:10:00</td>
                                <td>无</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
</body>

</html>